<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-server__tableConfig">
		
		<!-- 字段列表 -->
		 <el-row :gutter="15">
		      <el-col style="margin-bottom: 10px">
		        <el-card class="box-card" shadow="never">
		          <div slot="header" class="clearfix">
		            <span class="role-span">字段配置：{{ dataForm.tableName }}</span>
					
					<el-button v-if="$hasPermission('dbManage:preview')" :loading="genLoading" icon="el-icon-s-promotion" plain  size="mini" style="float: right; padding: 6px 9px;" type="success" @click="previewHandle(1)">预览</el-button>
					
					<el-button v-if="$hasPermission('dbManage:downLoadCode')" :loading="genLoading" icon="el-icon-download" plain size="mini" style="float: right; padding: 6px 9px;margin-right: 9px" type="primary" @click="previewHandle(3)">下载</el-button>
					
		            <el-button
						v-if="$hasPermission('dbManage:modifyTableConfig')"
		              :loading="columnLoading"
		              icon="el-icon-check"
		              size="mini"
		              style="float: right; padding: 6px 9px;margin-right: 9px"
		              type="primary"
		              @click="saveColumnConfig"
		            >保存</el-button>
		            <el-tooltip class="item" effect="dark" content="数据库中表字段变动时使用该功能" placement="top-start">
		              <el-button
						v-if="$hasPermission('dbManage:refresh')"
		                :loading="syncLoading"
		                icon="el-icon-refresh"
		                size="mini"
		                style="float: right; padding: 6px 9px;"
		                type="info"
		                @click="sync"
		              >同步</el-button>
		            </el-tooltip>
		          </div>
				  
				  <!-- 字段列表 -->
		          <el-form size="small" label-width="90px">
		            <el-table v-loading="loading" :data="columnList" :max-height="tableHeight" size="small" style="width: 100%;margin-bottom: 15px">
		              <el-table-column prop="fieldName" label="字段名称" />
					  <el-table-column prop="fieldRemark" label="Swagger描述">
					    <template slot-scope="scope">
					      <el-input v-model="scope.row.fieldRemark" size="mini" class="edit-input" />
					    </template>
					  </el-table-column>
		              <el-table-column prop="fieldType" label="物理类型" />
					 
						
						<el-table-column label="Java类型">
							<template slot-scope="scope">
							  <el-select v-model="scope.row.fieldJavaType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
								<el-option
									  v-for="item in fieldJavaTypes"
									  :key="item.value"
									  :label="item.label"
									  :value="item.value">
									</el-option>
							  </el-select>
							</template>
						</el-table-column>
						
						<el-table-column prop="fieldJavaName" label="Java属性">
						  <template slot-scope="scope">
						    <el-input v-model="scope.row.fieldJavaName" size="mini" class="edit-input" />
						  </template>
						</el-table-column>
						
					<!-- 	<el-table-column align="center" label="必填" width="70px">
						  <template slot-scope="scope">
							<el-checkbox v-model="scope.row.requiredFlag" />
						  </template>
						</el-table-column> -->
						<el-table-column align="center" prop="addFlag" label="插入" width="70px">
						  <template slot-scope="scope">
							<el-checkbox v-model="scope.row.addFlag" />
						  </template>
						</el-table-column>
						<el-table-column align="center" prop="updateFlag" label="编辑" width="70px">
						  <template slot-scope="scope">
							<el-checkbox v-model="scope.row.updateFlag" />
						  </template>
						</el-table-column>
						<el-table-column align="center" prop="listFlag" label="列表" width="70px">
						  <template slot-scope="scope">
							<el-checkbox v-model="scope.row.listFlag" />
						  </template>
						</el-table-column>
						<el-table-column align="center" prop="queryFlag" label="查询" width="70px">
						  <template slot-scope="scope">
							<el-checkbox v-model="scope.row.queryFlag" />
						  </template>
						</el-table-column>
						
						<el-table-column label="查询方式">
						<template slot-scope="scope">
						  <el-select v-model="scope.row.fieldQueryType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
							<el-option
							      v-for="item in queryTypes"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
						  </el-select>
						</template>
					  </el-table-column>
					  
					  <el-table-column label="表单类型">
						<template slot-scope="scope">
						  <el-select v-model="scope.row.showType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
							<el-option
								  v-for="item in showTypes"
								  :key="item.value"
								  :label="item.label"
								  :value="item.value">
								</el-option>
						  </el-select>
						</template>
					  </el-table-column>
					  
					  <el-table-column label="关联字典">
							<template slot-scope="scope">
							  <el-select v-model="scope.row.dictType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
								  <el-option
								        v-for="item in dictTypes"
								        :key="item.paramCode"
								        :label="item.paramValue"
								        :value="item.paramCode">
								        <span style="float: left">{{ item.paramValue }}</span>
								        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.paramCode }}</span>
								      </el-option>
							  </el-select>
							</template>
					  </el-table-column>
					  
					  
		              </el-table>
		          </el-form>
		        </el-card>
		      </el-col>
			  
			  
			  <!-- 生成配置 -->
			  <el-col>
			          <el-card class="box-card" shadow="never">
			            <div slot="header" class="clearfix">
			              <span class="role-span">生成配置</span>
			              <el-button
			                :loading="configLoading"
			                icon="el-icon-check"
			                size="mini"
			                style="float: right; padding: 6px 9px"
			                type="primary"
			                @click="doSubmit"
			              >保存</el-button>
			            </div>
			            <el-form ref="form" :model="form" :rules="rules" size="small" label-width="78px" >
							<el-form-item label="表描述" prop="tableComment">
							  <el-input v-model="form.tableComment" style="width: 40%" />
							  <span style="color: #C0C0C0;margin-left: 10px;">用于Entity上的备注</span>
							</el-form-item>
			              <el-form-item label="作者名称" prop="functionAuthor">
			                <el-input v-model="form.functionAuthor" style="width: 40%" />
			                <span style="color: #C0C0C0;margin-left: 10px;">类上面的作者名称</span>
			              </el-form-item>
			              <el-form-item label="生成功能" prop="functionName">
							<el-input v-model="form.functionName" style="width: 40%" />
							<span style="color: #C0C0C0;margin-left: 10px;">接口的名称，用于控制器与接口文档中</span>
						  </el-form-item>
			              <el-form-item label="至于包下" prop="packageName">
			                <el-input v-model="form.packageName" style="width: 40%" />
			                <span style="color: #C0C0C0;margin-left: 10px;">项目包的名称，生成的代码放到哪个包里面</span>
			              </el-form-item>
						  <el-form-item label="包名前缀" prop="projectPrefix">
						    <el-input v-model="form.projectPrefix" style="width: 40%" />
						    <span style="color: #C0C0C0;margin-left: 10px;">项目包的统一前缀，用于生成代码，例如fastboot-core就填写fastboot</span>
						  </el-form-item>
						  <el-form-item label="实体类名" prop="className">
						    <el-input v-model="form.className" style="width: 40%" />
						    <span style="color: #C0C0C0;margin-left: 10px;">数据库生成对应的POJO名称，即Entity名称</span>
						  </el-form-item>
			             
			              <el-form-item label="前端路径" prop="vuePath">
			                <el-input v-model="form.vuePath" style="width: 40%" />
			                <span style="color: #C0C0C0;margin-left: 10px;">输入views/modules文件夹下的<span style="color: red;font-weight: bold;">目录</span>，不存在即创建</span>
			              </el-form-item>
						  
						  <el-form-item label="备注" >
						    <el-input type="textarea"  v-model="form.remark" style="width: 40%" />
						  </el-form-item>
						  
						  <el-form-item label="覆盖生成" prop="coverFlag">
							<el-radio-group v-model="form.coverFlag" size="mini" style="width: 40%">
							  <el-radio-button label="true">是</el-radio-button>
							  <el-radio-button label="false">否</el-radio-button>
							</el-radio-group>
							<span style="color: #C0C0C0;margin-left: 10px;"><span style="color: red;font-weight: bold;">生成代码时 </span> 是否覆盖，谨防误操作，请慎重选择</span>
						  </el-form-item>
			             
			            </el-form>
			          </el-card>
			        </el-col>
			  
		    </el-row>
		
		
		
		
		<el-dialog :visible.sync="showReview" width="80%"  top="3vh">
				
				<el-tabs v-model="activeName" type="card" v-loading="reviewLoadding"  element-loading-text="拼命加载中">
					<div style="height: 60px;" v-if="reviewLoadding">
						<!-- 这个用来处理拼命加载中的位置问题 -->
					</div>
				    <el-tab-pane v-for="item in preCodes" :key="item.name" :lazy="true" :label="item.name" :name="item.name">
				      <Java :value="item.content" :height="height" />
				    </el-tab-pane>
				  </el-tabs>
				
		</el-dialog>
		
	  
    </div>
  </el-card>
</template>

<script>
import { setMd5 } from '@/utils'
import Cookies from 'js-cookie'
import Java from '../../../components/JavaEdit/index.vue'
export default {
  data () {
    return {
		columnList:[],
		activeName: 'first',  tableHeight: 550, columnLoading: false, configLoading: false, dictTypes: [], syncLoading: false, genLoading: false,
		form: {},
		loading: false,
		dataForm: {
		  tableName: ''
		},
		queryTypes:[
			{
				value: '=',
			    label: '='
			},{
				value: '!=',
			    label: '!='
			},{
				value: '>',
			    label: '>'
			},{
				value: '>=',
			    label: '>=',
			},{
				value: '<',
				label: '<'
			},{
				value: '<=',
			    label: '<='
			},{
				value: 'LIKE',
			    label: 'LIKE'
			},{
				value: 'BETWEEN',
			    label: 'BETWEEN'
			}
		],
		showTypes:[
			{
				value: '文本框',
			    label: '文本框'
			},{
				value: '下拉框',
			    label: '下拉框'
			},{
				value: '文本域',
			    label: '文本域'
			},{
				value: '单选框',
			    label: '单选框'
			},{
				value: '计数器',
			    label: '计数器'
			},{
				value: '日期控件',
			    label: '日期控件'
			}
		],
		fieldJavaTypes:[
			{
				value: 'String',
			    label: 'String'
			},{
				value: 'Long',
			    label: 'Long'
			},{
				value: 'Integer',
			    label: 'Integer'
			},{
				value: 'Boolean',
			    label: 'Boolean'
			},{
				value: 'Date',
			    label: 'Date'
			},{
				value: 'BigDecimal',
			    label: 'BigDecimal'
			},{
				value: 'Double',
			    label: 'Double'
			}
		]
		
		,rules: {
			functionAuthor: [
			  { required: true, message: '作者不能为空', trigger: 'blur' }
			],
			packageName: [
			  { required: true, message: '包路径不能为空', trigger: 'blur' }
			],
			className: [
			  { required: true, message: '实体类名称不能为空', trigger: 'blur' }
			],
			vuePath: [
			  { required: true, message: '前端路径不能为空', trigger: 'blur' }
			],
			functionName: [
			  { required: true, message: '接口名称不能为空', trigger: 'blur' }
			],
			tableComment: [
			  { required: true, message: '表描述 不能为空', trigger: 'blur' }
			],
			coverFlag: [
				{ required: true, message: '是否覆盖 不能为空', trigger: 'blur' }
			],
			projectPrefix: [
				{ required: true, message: '包名前缀 不能为空', trigger: 'blur' }
			],
		},
		
		
		reviewLoadding: false
		,showReview:false
		,preCodes: null
		,height: (window.innerHeight - 235) + ''
		,activeName: 'Entity'
	}
  },
  mounted() {
	this.loading = true;
	this.configLoading = true
	this.dataForm.tableName = this.$route.params.tableName
	this.tableHeight = document.documentElement.clientHeight - 385
	this.$nextTick(() => {
		var p = { params:{ tableName:this.dataForm.tableName } }
		
		//进来就进行查询
		this.$http.get(`/pc/database/tableConfig`,p).then(({ data: res }) => {
			if(res.code === 200){
				this.columnList = res.data.columnList
				this.form = res.data;
				this.form.columnList = null;
				this.form.columnJson = null;
				this.loading = false;
				this.configLoading = false
				this.$message({type: 'success', message: res.msg})
			}else{
				this.loading = false;
				this.configLoading = false
				this.$message.error(res.msg);
			}
		});
		
		//查询业务字典
		this.dictTypes = window.SITE_CONFIG['bizDictList'];
		
	})
  },
  components: {
	  Java
  },
  methods:{
	saveColumnConfig() {
		this.columnLoading = true
		var p = { id:this.form.id,tableName:this.dataForm.tableName,columnList: this.columnList }
		this.$http.post(`/pc/database/modifyTableConfig`,p).then(({ data: res }) => {
			if(res.code === 200){
				this.columnLoading = false;
				this.$message({type: 'success', message: res.msg})
			}else{
				this.columnLoading = false;
				this.$message.error(res.msg);
			}
		});
	},
	doSubmit() {
	  this.$refs['form'].validate((valid) => {
	    if (valid) {
	      this.configLoading = true
		  var p = JSON.parse(JSON.stringify(this.form));
		  this.$http.post(`/pc/database/modifyTableConfig`,p).then(({ data: res }) => {
		  	if(res.code === 200){
		  		this.configLoading = false;
				this.form.id = res.data.id
		  		this.$message({type: 'success', message: res.msg})
		  	}else{
		  		this.configLoading = false;
		  		this.$message.error(res.msg);
		  	}
		  });
	    }
	  })
	},
	
	sync() {
	  this.syncLoading = true
	  
	  var p = { tableName:this.dataForm.tableName}
	  this.$http.post(`/pc/database/refresh`,p).then(({ data: res }) => {
	  	if(res.code === 200){
	  		this.syncLoading = false;
			
			this.columnList = res.data.columnList
			this.form = res.data;
			this.form.columnList = null;
			this.form.columnJson = null;
			this.loading = false;
			this.$message({type: 'success', message: res.msg})
	  	}else{
	  		this.syncLoading = false;
	  		this.$message.error(res.msg);
	  	}
	  });
	},
	toGen() {
	  this.genLoading = true
	  this.$message.error('敬请期待...');
	  this.genLoading = false
	}
	
	,previewHandle(rt){
		var r = this.dataForm;
			  if( rt === 1 ){
				  this.showReview = true
				  this.reviewLoadding = true;
				  //查询
				  var p = { params:{ tableName:r.tableName } }
				  return this.$http.get('/pc/database/preview',p).then(({ data: res }) => {
				    if (res.code !== 200) {
				  				this.showReview = false;
				  				this.reviewLoadding = false;
				  				return this.$message.error(res.msg)
				    }
				  			this.reviewLoadding = false;
				  	 this.preCodes = res.data
				  }).catch(() => {})
			  }else if( rt === 2 ){
				//确认框
				this.$confirm('是否生成  ‘' + r.tableName +  '’  代码？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message.success('生成中,请稍后...')
					var p = { params:{ tableName:r.tableName } }
					return this.$http.get('/pc/database/gen',p).then(({ data: res }) => {
					if (res.code !== 200) {
						return this.$message.error('生成'+res.msg)
					}
					return this.$message.success('生成'+res.msg)
				}).catch(() => {
					return this.$message.error('生成失败')
				})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消生成'
					  });   
				});
			  }else if( rt === 3 ){
				//确认框
				this.$confirm('是否下载  ‘' + r.tableName +  '’  代码？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message.success('生成中,请稍后...')
					var p = { params:{ tableName:r.tableName } }
					this.$http.get('/pc/database/downLoadCode',p).then(({ data:res }) => {
						const url = window.URL.createObjectURL(new Blob([res, {type: 'application/zip'}]))
						const link = document.createElement('a')
						link.style.display = 'none'
						link.href = url
						const fileName = new Date().valueOf() + '-' + r.tableName + '.zip'
						link.setAttribute('download', fileName)
						document.body.appendChild(link)
						link.click()
						document.body.removeChild(link)
					}).catch(() => {
						return this.$message.error('下载失败')
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消下载'
					  });   
				});
			  }
			 
	}
	      
	      
  }
  ,
  destroyed () {
	  
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .edit-input {
    .el-input__inner {
      border: 1px solid #e5e6e7;
    }
  }
</style>

<style scoped>
 ::v-deep .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

